<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<script src="./jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
//			点击事件
			$('#du').click(function(){
//				判断sesionttorage里边是否有数据
			 	var w=window.sessionStorage.getItem('id');
//			 	如果有数据就走if体里边
				if(w){
	//				alert(w);
//					把数据转换成json
					var dd=JSON.parse(w);
							var str='<tr><td>ID</td><td>标题</td></tr>';
							$.each(dd, function($kk,$vv) {
								var d=$vv.id;
								var ti=$vv.title;
//								组合字符串
								str+='<tr><td>'+d+'</td><td>'+ti+'</td></tr>';
							});
//							替换页面元素
							$("#table").html(str);
							return;
				}
				$.ajax({
						type:"post",
						url:"./get.php",
						dataType:'json',
						success:function(phpData){
							var str='<tr><td>ID</td><td>标题</td></tr>';
							$.each(phpData, function($k,$v) {
								var id=$v.id;
								var title=$v.title;
								
								str+='<tr><td>'+id+'</td><td>'+title+'</td></tr>';
							});
							var p=JSON.stringify(phpData);
							window.sessionStorage.setItem('id',p);
	//						console.log(phpData);
							$("#table").html(str);
						}
						
					});
					
			})
			
		})
	</script>
</head>
<body>
	<table border="1" cellspacing="" cellpadding="" id="table">
		<!--<tr><th>Header</th></tr>-->
		<tr>
			<td>ID</td><td>标题</td>
		</tr>
		<tr class="t">
			
		</tr>
	</table>
	<a href="javascript:;" id="du">读取更多文章</a>
</body>
</html>

